<template>
    <div class="main-header">
        <el-menu class="menu" :router="true" :default-active="active" mode="horizontal" @select="handleSelect"
            background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
            <el-menu-item index="/home" class="el-icon-menu">首页</el-menu-item>
            <el-menu-item index="/task" class="el-icon-tickets">任务</el-menu-item>
        </el-menu>
        <div class="msg">
            <span class="name el-icon-location">胡崇宪</span>
            <span class="signOut el-icon-sold-out" @click="logout">退出</span>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'mainHeader',
        data() {
            return {
                active: '/home'
            }
        },
        watch: {
            $route: {
                handler() {
                    var router = (this.$route.path).split('/')[1];
                    this.active = '/' + router;
                },
                immediate: true
            }
        },
        computed: {},
        methods: {
            handleSelect(key, keyPath) {
            },
            logout() {
                this.setCookie('sessionid', '', -1);
                let location = {
                    path: '/login'
                }
                this.$router.push(location);
            },
            //设置cookie
            setCookie(cname, cvalue, exdays = 365) {
                let d = new Date();
                d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
                let expires = 'expires=' + d.toUTCString();
                document.cookie = cname + '=' + cvalue + ';' + expires;
            }
        },
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
    .main-header {
        overflow: hidden;
        background: #545c64;

        .menu {
            float: left;
            border: 0 none;
        }

        .msg {
            float: right;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 60px;
            color: #fff;
            padding-right: 20px;

            span {
                margin: 0 0 0 20px;
            }
        }
    }

    .signOut {
        cursor: pointer;
        &:hover {
            color: #409EFF;
        }
    }
</style>